<script setup lang="ts">
import { Qrcode } from '@/components/Qrcode'
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { computed, ref, unref } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { ElRow, ElCard, ElCol, ElMessage } from 'element-plus'
// @ts-ignore
import logoImg from '@/assets/imgs/logo.png'

const appStore = useAppStore()

const { t } = useI18n()

const title = computed(() => appStore.getTitle)

const asyncTitle = ref('')

setTimeout(() => {
  asyncTitle.value = unref(title)
}, 3000)

const codeClick = () => {
  ElMessage.info(t('qrcodeDemo.click'))
}

const disabledClick = () => {
  ElMessage.info(t('qrcodeDemo.invalid'))
}
</script>

<template>
  <ContentWrap
    :title="t('qrcodeDemo.qrcode')"
    :message="t('qrcodeDemo.qrcodeDes')">
    <ElRow
      :gutter="20"
      justify="space-between">
      <ElCol
        :xl="6"
        :lg="6"
        :md="12"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-10px text-center">
          <div class="font-bold">{{ t('qrcodeDemo.basicUsage') }}</div>
          <Qrcode :text="title" />
        </ElCard>
      </ElCol>
      <ElCol
        :xl="6"
        :lg="6"
        :md="12"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-10px text-center">
          <div class="font-bold">{{ t('qrcodeDemo.imgTag') }}</div>
          <Qrcode
            :text="title"
            tag="img" />
        </ElCard>
      </ElCol>
      <ElCol
        :xl="6"
        :lg="6"
        :md="12"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-10px text-center">
          <div class="font-bold">{{ t('qrcodeDemo.style') }}</div>
          <Qrcode
            :text="title"
            :options="{
              color: {
                dark: '#55D187',
                light: '#2d8cf0',
              },
            }" />
        </ElCard>
      </ElCol>
      <ElCol
        :xl="6"
        :lg="6"
        :md="12"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-10px text-center">
          <div class="font-bold">{{ t('qrcodeDemo.click') }}</div>
          <Qrcode
            :text="title"
            @click="codeClick" />
        </ElCard>
      </ElCol>
      <ElCol
        :xl="6"
        :lg="6"
        :md="12"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-10px text-center">
          <div class="font-bold">{{ t('qrcodeDemo.asynchronousContent') }}</div>
          <Qrcode :text="asyncTitle" />
        </ElCard>
      </ElCol>
      <ElCol
        :xl="6"
        :lg="6"
        :md="12"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-10px text-center">
          <div class="font-bold">{{ t('qrcodeDemo.invalid') }}</div>
          <Qrcode
            :text="title"
            disabled
            @disabled-click="disabledClick" />
        </ElCard>
      </ElCol>
      <ElCol
        :xl="6"
        :lg="6"
        :md="12"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-10px text-center">
          <div class="font-bold">{{ t('qrcodeDemo.logoConfig') }}</div>
          <Qrcode
            :text="title"
            :logo="logoImg" />
        </ElCard>
      </ElCol>
      <ElCol
        :xl="6"
        :lg="6"
        :md="12"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-10px text-center">
          <div class="font-bold">{{ t('qrcodeDemo.logoStyle') }}</div>
          <Qrcode
            :text="title"
            :logo="{
              src: logoImg,
              logoSize: 0.2,
              borderSize: 0.05,
              borderRadius: 50,
              bgColor: 'blue',
            }" />
        </ElCard>
      </ElCol>
      <ElCol
        :xl="6"
        :lg="6"
        :md="12"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-10px text-center">
          <div class="font-bold">{{ t('qrcodeDemo.size') }}</div>
          <Qrcode
            :text="title"
            :width="100" />
        </ElCard>
      </ElCol>
    </ElRow>
  </ContentWrap>
</template>
